<div>
  <div class="section-header d-flex align-items-center">
    <h2 class="color-blue" *ngIf="!key || showQuestion.length > 0">Sessions</h2>
    <div class="ms-2 mb-1" (click)="changeBrowserUrl(Sections.sessions)">
      <div class="fas fa-anchor"></div>
    </div>
  </div>
  <!-- Section -->
  <h4 *ngIf="displaySubsection(0, 9)">Setting Up Sessions</h4>
  <!-- Question -->
  <tm-instructor-help-panel class="instr-help-qn-first" #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.TIPS_FOR_CONDUCTION_PEER_EVAL)"
                            [id]="SessionsSectionQuestions.TIPS_FOR_CONDUCTION_PEER_EVAL"
                            [section]="Sections.sessions"
                            headerText="Tips for conducting team peer evaluation sessions"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.TIPS_FOR_CONDUCTION_PEER_EVAL]">
    <p>
      Any evaluation system has both positive and negative effects on those being evaluated.
      As teachers, you are probably keen to maximize the positive effect of this system on your course while minimizing any negative effects.
      Here are some of the things you could do:
    </p>
    <ul>
      <li>
        <b>Have frequent peer evaluations.</b><br>
        Rather than have only one peer evaluation at the end of the course, have several peer evaluations at different points of the course. This way, students get frequent peer-feedback about their contribution, giving them plenty of chances to correct their conduct as necessary.
        <br><br>
      </li>
      <li>
        <b>Ignore early peer evaluations.</b><br>
        Consider not using initial peer evaluations for grading. Let students know that in advance. This gives students time to get used to the system and be more relaxed in giving early feedback to peers.
        <br><br>
      </li>
      <li>
        <b>Interpret contribution numbers with care.</b><br>
        If you use 'Team contribution' type questions in your peer evaluations, keep in mind the contribution numbers reported by TEAMMATES are based on student perceptions and may not reflect the real contribution of a student. Therefore, use those numbers primarily to identify cases that need further investigation.
        <br> You may ignore minor variations in the contribution numbers reported by TEAMMATES. The difference between [Equal share] and [Equal share - 2%] is not significant and can very well be due to rounding off within the system.
        <br> <br>Keep in mind that it is human nature for one to downplay the value of contributions from others when one's own contribution is being compared to that of others. As a result, it is common for the 'perceived contribution' to be somewhat lower than what the student actually did.
        <br> When taking further actions based on evaluation reports, also pay attention to the team's consensus level about the contribution of a student. For example, you can take further actions with more confidence if all team members rated a certain student's contribution low.
        <br><br>
      </li>
      <li>
        <b>Tolerate unequal contributions.</b><br>
        This may be a good policy to adopt (If students know this policy, they will be more honest in reporting contribution values):
        <br>
        <br>
        <i>It is OK to do less than an equal share of the work, as long as you are willing to accept a lower grade than your team members. It is your right to decide how much time you allocate to this course. How you prioritize your work is your own business.</i>
        <br><br>
      </li>
      <li>
        <b>Announce a 'cooling off' period.</b><br>
        This may be a good guidelines to give to students:
        <br><br>
        <i>If you are unhappy about the peer-feedback received, please allow at least one day to lapse before you fire off a response email. You are likely to respond more rationally when you had some time to think it over. Also keep in mind that we do take note of how well you handle such a situation. You need to act professionally when facing conflicting views, opposition, and even deliberate sabotage.</i>
      </li>
    </ul>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.SESSION_NEW_FEEDBACK)"
                            [id]="SessionsSectionQuestions.SESSION_NEW_FEEDBACK"
                            [section]="Sections.sessions"
                            headerText="How do I create and schedule a new feedback session?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.SESSION_NEW_FEEDBACK]">
    To create a new feedback session, click the <span class="ui-text">Sessions</span> tab at the top of the page. Then,
    fill out and submit the <span class="ui-text">Add New Feedback Session</span> form:
    <ol>
      <li>
        <b>Choose a session type</b>. You can choose between creating a session with your own questions,
        creating a copy of a session you previously made, or using one of our session templates.
        <br>
        <ul>
          <li>
            Session with your own questions: you'll start with an empty template to which you can add your own
            questions.
          </li>
          <li>
            Session using template: TEAMMATES will provide you with a template of a typical session that you can
            add to and customize to suit your needs.
          </li>
          <li>
            Copy from previous feedback sessions: you can reuse questions and settings from a survey you created
            in the past.
          </li>
        </ul>
      </li>
      <li>
        <b>Select the course ID</b> of the course for which the session will be created.
      </li>
      <li>
        <b>Give your session a session name</b>. This name will be visible to session respondents.
      </li>
      <li>
        <b>Set the session's submission opening/closing time</b>. This is the time period during which students
        can submit responses. TEAMMATES will automatically open and close the session at times you specify.
      </li>
      <li>
        (Optional) Set advanced options to best suit your needs:
      </li>
      <ul>
        <li>
          Set a custom time zone.
        </li>
        <li>
          Give students more specific instructions.
        </li>
        <li>
          Set a grace period during which students can still submit responses if the session closes.
        </li>
        <li>
          Choose when you want this session to be visible to students. After this time, students can see the questions,
          but they cannot submit their responses until the session is <i>open</i>.
        </li>
        <li>
          Choose when you want to make this session's responses visible. At this time, TEAMMATES will automatically
          publish the results for students to view.
        </li>
        <li>
          Choose whether TEAMMATES should send reminder or announcement emails to students about this session.
        </li>
        <li>
          Make the session private. A private session is a session that is never visible to others.
          This is for you to record your feedback about students. If you want to create a private session,
          set "Make session visible" to <code>Never</code>.
        </li>
      </ul>
      <li>
        <b>Click Create Feedback Session</b>!
      </li>
    </ol>
    <p>
      This is the form used to set up sessions.
    </p>
    <tm-example-box *ngIf="questionsToCollapsed[SessionsSectionQuestions.SESSION_NEW_FEEDBACK]" @collapseAnim>
      <tm-session-edit-form [formMode]="SessionEditFormMode.ADD"
                            [model]="exampleSessionEditFormModel"
                            [courseCandidates]="exampleCourseCandidates"
                            [templateSessions]="exampleTemplateSessions">
      </tm-session-edit-form>
    </tm-example-box>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.SESSION_QUESTIONS)"
                            [id]="SessionsSectionQuestions.SESSION_QUESTIONS"
                            [section]="Sections.sessions"
                            headerText="How do I add questions to a session?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.SESSION_QUESTIONS]">
    <p>
      After setting up a session, you can start adding questions.<br>
      You can also access this page by clicking the <button class="btn btn-sm btn-light">Edit</button> button of the desired session from the <span class="ui-text">Home</span> or <span class="ui-text">Sessions</span> page.
    </p>
    <p>
      To add a question:
    </p>
    <ol>
      <li>
        Scroll to the bottom of the page.
      </li>
      <li>
        Select between adding a question from our predefined <a (click)="jumpTo('questions')" [tmRouterLink]="">question types</a> or
        copying a question from an existing feedback session.
      </li>
      <li>
        Save changes to the question when you have finished creating the question
      </li>
    </ol>
    <tm-example-box *ngIf="questionsToCollapsed[SessionsSectionQuestions.SESSION_QUESTIONS]" @collapseAnim>
      <tm-adding-question-panel [isLinkDisabled]="true"></tm-adding-question-panel>
    </tm-example-box>
    <p>
      TEAMMATES gives you fine-grained control of each question. In addition to providing a range of different
      <a (click)="jumpTo('questions')" [tmRouterLink]="">question types</a>,
      you can also customize your desired:
    </p>
    <ul>
      <li>
        <b>Feedback Path</b>: define who is giving feedback, and who the feedback is about.
        Select a common feedback path from the drop-down menu, or choose "Other predefined combinations..."
        to define the Feedback Giver and Recipient separately.
        If you choose a 'team' as the giver, any member can submit the response on behalf of the team.
      </li>
      <li>
        <b>Visibility options</b>: let students know who will be able to see their answers.
        Select a common visibility option from the drop-down menu, or choose "Custom visibility options..."
        to fully customize who can see the feedback response, the giver's identity, and the recipient's identity.
      </li>
    </ul>
    <p>
      In the example question below, students will give feedback on their own team members.
      The team member receiving feedback can see the feedback, but not who gave the feedback.
      Instructors can see who received what feedback, and who gave the feedback.
    </p>
    <tm-example-box *ngIf="questionsToCollapsed[SessionsSectionQuestions.SESSION_QUESTIONS]" @collapseAnim>
      <tm-feedback-path-panel></tm-feedback-path-panel>
      <tm-visibility-panel></tm-visibility-panel>
    </tm-example-box>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.SET_QUESTION_COMPULSORY)"
                            [id]="SessionsSectionQuestions.SET_QUESTION_COMPULSORY"
                            [section]="Sections.sessions"
                            headerText="Can I set a question as 'compulsory'?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.SET_QUESTION_COMPULSORY]">
    <p>
      Not at the moment. But you can mention in the question description that it is a compulsory question (TEAMMATES will not enforce it though).
    </p>
    <tm-example-box *ngIf="questionsToCollapsed[SessionsSectionQuestions.SET_QUESTION_COMPULSORY]" @collapseAnim>
      <tm-question-edit-brief-description-form [brief]="'How many hours did you spend on the project?'" [isBriefDisabled]="true"
                                               [description]="'<p><strong>This question is </strong><span style=\'color: rgb(255, 0, 0); background-color: rgb(255, 255, 0);\'><strong>compulsory</strong></span><strong>!</strong></p>'"
      ></tm-question-edit-brief-description-form>
    </tm-example-box>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.SESSION_PREVIEW)"
                            [id]="SessionsSectionQuestions.SESSION_PREVIEW"
                            [section]="Sections.sessions"
                            headerText="How do I preview a session?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.SESSION_PREVIEW]">
    <p>
      To see what the current session looks like to anyone in the course when they are submitting responses, use the <span class="ui-text">Preview</span> feature.<br>
      You can quickly and easily confirm that the questions and their settings are correct after editing questions.
    </p>
    <p>
      To access the preview panel of a specific session, click the <button class="btn btn-sm btn-light">Edit</button> button for that session in the <span class="ui-text">Home</span> or <span class="ui-text">Sessions</span> page. The preview
      panel is located at the bottom of the Edit Feedback Session page.
    </p>
    <tm-example-box *ngIf="questionsToCollapsed[SessionsSectionQuestions.SESSION_PREVIEW]" @collapseAnim>
      <tm-preview-session-panel [emailOfStudentToPreview]="exampleStudents[0].email" [emailOfInstructorToPreview]="exampleInstructors[0].email"
                                [studentsOfCourse]="exampleStudents" [instructorsCanBePreviewedAs]="exampleInstructors"
                                [forDisplayOnly]="true"
      ></tm-preview-session-panel>
    </tm-example-box>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.LET_STUDENT_KNOW_SESSION)"
                            [id]="SessionsSectionQuestions.LET_STUDENT_KNOW_SESSION"
                            [section]="Sections.sessions"
                            headerText="How do I let students know about a session?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.LET_STUDENT_KNOW_SESSION]">
    <p>
      No action is required from you for this. TEAMMATES will send an email (containing submission instructions) to each respondent when the session opens for submissions.
      After that email has been sent out (you will receive a copy of it, for your reference), you are welcome to inform respondents using another means (outside of TEAMMATES) to look out for the TEAMMATES email.
    </p>
    <p>
      Note that the email generation can take up to 30 minutes from the session start time.
    </p>
    <p>
      <span class="text-danger">Do not use the 'publish' feature for this purpose.</span> That feature is for making the responses available for viewing,
      which you are likely to do after the session deadline is over, unless you want the responses to become visible as they are being collected.
    </p>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.STUDENT_DID_NOT_RECEIVE_SUBMISSION_LINK)"
                            [id]="SessionsSectionQuestions.STUDENT_DID_NOT_RECEIVE_SUBMISSION_LINK"
                            [section]="Sections.sessions"
                            headerText="What should I do if students say they didn't receive the link to submit responses, as they were supposed to?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.STUDENT_DID_NOT_RECEIVE_SUBMISSION_LINK]">
    <p>
      Here are some remedies:
    </p>
    <ol>
      <li>
        Ask students to go to <a tmRouterLink="/web/front/help/session-links-recovery">the session links recovery page</a> and request TEAMMATES to resend the link.
        They should specify the exact email address that was used to enroll them in TEAMMATES.
      </li>
      <li>
        Use the <button class="btn btn-light btn-sm dropdown-toggle">Remind</button> button on your <span class="ui-text">Home</span> or <span class="ui-text">Sessions</span> page (there is one for each session) to resend emails to specific students or all those who haven't submitted yet. Also, ask students to check their spam box.
      </li>
      <li>
        Failing all above, ask students to email us at <a href="mailto:{{ supportEmail }}">{{ supportEmail }}</a>. We can resend the email using an alternate means.
        When they email us, they should use the email address currently registered in TEAMMATES (for identification).
      </li>
    </ol>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.EXTEND_SESSION_DEADLINE)"
                            [id]="SessionsSectionQuestions.EXTEND_SESSION_DEADLINE"
                            [section]="Sections.sessions"
                            headerText="How do I extend the deadline of a session?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.EXTEND_SESSION_DEADLINE]">
    <p>
      To extend the deadline for all respondents, edit the session and change the submission closing time as desired. This can be done at any time.
    </p>
    <p>
      To extend the deadline for specific students and/or instructors:
    </p>
    <ol>
      <li>
        Edit the session and click <a>Individual Deadline Extensions <i class="fas fa-edit"></i></a> next to <span class="ui-text">Submission closing time</span>.
      </li>
      <li>
        Select the students and/or instructors you want to extend the deadline for, then click the <button class="btn btn-sm btn-success">Extend / Edit</button> button at the bottom.
      </li>
      <li>
        Follow the instructions on the pop-up window to extend the deadline. There are two options:
        <ul>
          <li>
            <b>Extend by a specific period</b>: new deadline = original submission closing time (not the current deadline for the selected students and/or instructors) + selected extension time
          </li>
          <li>
            <b>Extend to a specific time</b>: new deadline = selected date and time
          </li>
        </ul>
        Before confirming the new deadline, you can tick the <span class="ui-text">Notify affected students and/or instructors by email about this extension</span> checkbox, if you want TEAMMATES to send an email to the affected persons.<br>
        Students and instructors who have deadline extensions for the session will be highlighted in yellow.
      </li>
      <li>
        If you want to revert back the deadline for specific students and/or instructors to the original submission closing time, select the students and/or instructors and click the <button class="btn btn-sm btn-danger">Delete</button> button at the bottom.
      </li>
    </ol>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.CHANGE_VISIBILITY_AFTER_SESSION_START)"
                            [id]="SessionsSectionQuestions.CHANGE_VISIBILITY_AFTER_SESSION_START"
                            [section]="Sections.sessions"
                            headerText="Can I change the visibility settings of questions after the session has started?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.CHANGE_VISIBILITY_AFTER_SESSION_START]">
    <p>
      Yes, but it is not recommended.
    </p>
    <p>
      Reason: The current visibility setting of each question is shown to the respondent at the point of response submission i.e., responses are submitted based on the promise of a certain visibility.
      Changing the visibility later would be like 'breaking a promise' you made earlier.
    </p>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel class="instr-help-qn-last" #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.DIFFERENT_TEAM_STRUCTURE)"
                            [id]="SessionsSectionQuestions.DIFFERENT_TEAM_STRUCTURE"
                            [section]="Sections.sessions"
                            headerText="Can I use a different team structure for different sessions in the same course?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.DIFFERENT_TEAM_STRUCTURE]">
    <p>
      Currently it is not possible.
    </p>
    <p>
      If you change the team structure midway, the new team structure will apply to all current/past sessions as well, and will cause any 'incompatible' responses (e.g., responses submitted in relation to a team that no longer exists) to be deleted automatically.
    </p>
    <p>
      Workarounds (neither is optimal, unfortunately):
    </p>
    <ol class="different-team-ol">
      <li>
        Create a different course for each team structure you want to support.
      </li>
      <li>
        Keep changing the team structure as necessary but download the existing responses before changing it -- this works only if it is not important for students to be able to view responses to past sessions.
      </li>
    </ol>
  </tm-instructor-help-panel>

  <!-- Section -->
  <h4 *ngIf="displaySubsection(9, 17)">Managing Session Responses</h4>
  <!-- Question -->
  <tm-instructor-help-panel class="instr-help-qn-first" #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.STUDENT_EDIT_RESPONSE)"
                            [id]="SessionsSectionQuestions.STUDENT_EDIT_RESPONSE"
                            [section]="Sections.sessions"
                            headerText="Can students edit responses they submitted earlier?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.STUDENT_EDIT_RESPONSE]">
    <p>
      Yes, they can edit responses any number of times, as long as the session is still open. To edit responses, they can use the same method they used when submitting the responses initially.
    </p>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.SUBMIT_FOR_STUDENT)"
                            [id]="SessionsSectionQuestions.SUBMIT_FOR_STUDENT"
                            [section]="Sections.sessions"
                            headerText="Can I submit responses on behalf of a student?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.SUBMIT_FOR_STUDENT]">
    <p>
      Yes, instructors can submit responses on behalf of a student. To do so:
    </p>
    <ol>
      <li>
        Ask the student to view the submission page and send you his/her answers to the session questions.
      </li>
      <li>
        <a (click)="jumpTo(SessionsSectionQuestions.SESSION_VIEW_RESULTS); questionsToCollapsed[SessionsSectionQuestions.SESSION_VIEW_RESULTS] = true" [tmRouterLink]="">View the course-wide results</a> of the session.
      </li>
      <li>
        Scroll to the panel titled <span class="ui-text">Participants who have not responded to any question</span>. Click on the panel to expand it.
      </li>
      <li>
        Click the <button type="button" class="btn btn-sm btn-light">Submit responses</button> button of the corresponding student. You will be directed to a page where you can submit responses on behalf of the student.
      </li>
      <li>
        Copy the student's responses to the corresponding questions, and click the <button type="button" class="btn btn-success btn-sm">Submit Responses</button> button.
      </li>
    </ol>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.STUDENT_ACCESS_SUBMISSION_PAGE)"
                            [id]="SessionsSectionQuestions.STUDENT_ACCESS_SUBMISSION_PAGE"
                            [section]="Sections.sessions"
                            headerText="Can I see when a student tried to access the submission page?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.STUDENT_ACCESS_SUBMISSION_PAGE]">
    <p>
      Not at the moment. If there is such a need, email us at <a href="mailto:{{ supportEmail }}">{{ supportEmail }}</a>, and we'll try to find that information for you.
    </p>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.SESSION_VIEW_RESULTS)"
                            [id]="SessionsSectionQuestions.SESSION_VIEW_RESULTS"
                            [section]="Sections.sessions"
                            headerText="How do I view the results of my session?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.SESSION_VIEW_RESULTS]">
    <p>
      To view responses to a session, click the <button class="btn btn-light btn-sm dropdown-toggle">Results</button> button of a session in the <span class="ui-text">Home</span> or <span class="ui-text">Sessions</span> page, then select one of these options:
    </p>
    <ul>
      <li>
        <b>View Results (from/to me)</b>: to view responses you submitted, and responses others submitted about you
      </li>
      <li>
        <b>View Results (course-wide)</b>: to view all responses collected by that session
      </li>
    </ul>
    <br>
    <p>
      The following is useful if you are viewing course-wide results.
    </p>
    <p>
      You can use different options in the <span class="ui-text">View</span> drop-down menu to sort the results in an order that best suits you.<br>
      5 different views are available, each denoting the order in which responses are grouped.
      Additionally, you can group the results by team, show or hide statistics, view missing responses and filter responses from a particular section.
    </p>
    <tm-example-box *ngIf="questionsToCollapsed[SessionsSectionQuestions.SESSION_VIEW_RESULTS]" @collapseAnim>
      <tm-view-results-panel></tm-view-results-panel>
    </tm-example-box>
    <p>
      In the example below, results are sorted by <span class="ui-text">Giver &#8594; Recipient &#8594; Question</span>. Additionally, missing responses have been recorded.
    </p>
    <tm-example-box *ngIf="questionsToCollapsed[SessionsSectionQuestions.SESSION_VIEW_RESULTS]" @collapseAnim>
      <tm-instructor-session-result-grq-view [session]="this.exampleFeedbackSession"
                                             [section]="'Section A'"
                                             [sectionType]="InstructorSessionResultSectionType.EITHER"
                                             [groupByTeam]="true"
                                             [showStatistics]="true"
                                             [indicateMissingResponses]="true"
                                             [isExpandAll]="true"
                                             [instructorCommentTableModel]="exampleInstructorCommentTableModel"
                                             [responses]="exampleGrqResponses"
      ></tm-instructor-session-result-grq-view>
      <tm-instructor-session-no-response-panel [session]="exampleFeedbackSession"
                                               [section]="'Section A'"
                                               [allStudents]="exampleStudents"
                                               [noResponseStudents]="exampleStudents"
                                               [isDisplayOnly]="true"
      ></tm-instructor-session-no-response-panel>
    </tm-example-box>
    <p>If you choose to publish the results of the session, students will receive an email with a link to access the
      session's results. What they can see is governed by the visibility levels you set when setting up the session.
      Here is an example of what a student might see:
    </p>
    <tm-example-box *ngIf="questionsToCollapsed[SessionsSectionQuestions.SESSION_VIEW_RESULTS]" @collapseAnim>
      <tm-question-response-panel [questions]="exampleQuestionsWithResponses"></tm-question-response-panel>
    </tm-example-box>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.VIEW_ALL_RESPONSES)"
                            [id]="SessionsSectionQuestions.VIEW_ALL_RESPONSES"
                            [section]="Sections.sessions"
                            headerText="How do I view all the responses a student has given and received?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.VIEW_ALL_RESPONSES]">
    <p>
      To view the responses that Student A from Course B has given and received (across all sessions in the course):
    </p>
    <ol>
      <li>
        Go to the <span class="ui-text">Students</span> page and click the panel heading for Course B. You will see a list of students enrolled in the course.
      </li>
      <li>
        Click <button class="btn btn-sm btn-light">All Records</button> button corresponding to Student A to access all the responses Student A has given and received.
      </li>
    </ol>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.MODERATE_RESPONSE)"
                            [id]="SessionsSectionQuestions.MODERATE_RESPONSE"
                            [section]="Sections.sessions"
                            headerText="Am I able to moderate responses submitted by students?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.MODERATE_RESPONSE]">
    <p>
      Yes, the 'moderate' feature is available when you view the course-wide results of a session.
    </p>
    <p>
      To moderate a response in a session:
    </p>
    <ol>
      <li>
        <a (click)="jumpTo(SessionsSectionQuestions.SESSION_VIEW_RESULTS); questionsToCollapsed[SessionsSectionQuestions.SESSION_VIEW_RESULTS] = true" [tmRouterLink]="">View the course-wide results</a> of the session.
      </li>
      <li>
        Locate the response you would like to moderate and click the <button class="btn btn-light btn-sm">Moderate response</button> button associated with the response.
      </li>
      <li>
        Edit the response as if you were the submitter. Remember to click the <button class="btn btn-success btn-sm">Submit Responses</button> button after your edit.
      </li>
    </ol>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.STUDENT_SEE_RESPONSE)"
                            [id]="SessionsSectionQuestions.STUDENT_SEE_RESPONSE"
                            [section]="Sections.sessions"
                            headerText="When do students get to see the results collected by a session?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.STUDENT_SEE_RESPONSE]">
    <p>
      Students can only see the results after you have published the results of that session. Until then, they can only see responses submitted by themselves.<br>
      When you publish the results of a session, TEAMMATES will email each student instructions for viewing results. What students will get to see depends on the visibility setting of each question.
    </p>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel class="instr-help-qn-last" #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.STUDENT_DID_NOT_RECEIVE_RESULT_LINK)"
                            [id]="SessionsSectionQuestions.STUDENT_DID_NOT_RECEIVE_RESULT_LINK"
                            [section]="Sections.sessions"
                            headerText="What should I do if students say they didn't receive the link to view results, even after I published the session responses?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.STUDENT_DID_NOT_RECEIVE_RESULT_LINK]">
    <p>
      Here are some remedies:
    </p>
    <ol>
      <li>
        Ask students to go to <a tmRouterLink="/web/front/help/session-links-recovery">the session links recovery page</a> and request TEAMMATES to resend the link.
        They should specify the exact email address that was used to enroll them in TEAMMATES.
      </li>
      <li>
        Go to the <span class="ui-text">Home</span> or <span class="ui-text">Sessions</span> page and click the <button class="btn btn-light btn-sm dropdown-toggle">Results</button> button of the published session.<br>
        Then select <span class="ui-text">Resend link to view results</span> in the drop-down menu to resend emails to specific students. Make sure the session results are published if you are unable to see the option.
      </li>
      <li>
        Failing all above, ask students to email us at <a href="mailto:{{ supportEmail }}">{{ supportEmail }}</a>. We can resend the email using an alternate means.
        When they email us, they should use the email address currently registered in TEAMMATES (for identification).
      </li>
    </ol>
  </tm-instructor-help-panel>

  <!-- Section -->
  <h4 *ngIf="displaySubsection(17, 19)">Adding Comments to Responses</h4>
  <!-- Question -->
  <tm-instructor-help-panel class="instr-help-qn-first" #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.SESSION_ADD_COMMENTS)"
                            [id]="SessionsSectionQuestions.SESSION_ADD_COMMENTS"
                            [section]="Sections.sessions"
                            headerText="How do I create a comment on a response?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.SESSION_ADD_COMMENTS]">
    <p>
      While viewing the course-wide results of a session, you can add comments to respondents' answers.
    </p>
    <p>
      To create comments on a response in a session:
    </p>
    <ol>
      <li>
        <a (click)="jumpTo(SessionsSectionQuestions.SESSION_VIEW_RESULTS); questionsToCollapsed[SessionsSectionQuestions.SESSION_VIEW_RESULTS] = true" [tmRouterLink]="">View the course-wide results</a> of the session.
      </li>
      <li>
        Click the <span class="ui-text">View</span> drop-down menu and change the view type to <span class="ui-text">Group by - Giver &#8594; Recipient &#8594; Question</span> or <span class="ui-text">Group by - Recipient &#8594; Giver &#8594; Question</span>.
      </li>
      <li>
        Click the <button class="btn btn-outline-primary btn-sm"><i class="fas fa-comment"></i></button> icon on the right-hand side of the response you would like to comment on.
      </li>
      <li>
        Fill in the form, which will appear similar to the example below.
      </li>
    </ol>
    <tm-example-box *ngIf="questionsToCollapsed[SessionsSectionQuestions.SESSION_ADD_COMMENTS]" @collapseAnim>
      <div class="card-body">
        <tm-comment-edit-form
                [mode]="CommentRowMode.ADD"
                [model]="exampleCommentEditFormModel"
                [isFeedbackParticipantComment]="false"
                [response]="exampleResponse"
                [questionShowResponsesTo]="[]"
                [isDisabled]="false"
                [shouldHideSavingButton]="false"
                [shouldHideClosingButton]="false"
                [isVisibilityOptionEnabled]="true">
        </tm-comment-edit-form>
      </div>
    </tm-example-box>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.EDIT_DEL_COMMENT)"
                            [id]="SessionsSectionQuestions.EDIT_DEL_COMMENT"
                            [section]="Sections.sessions"
                            headerText="How do I edit or delete a comment on a response?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.EDIT_DEL_COMMENT]">
    <p>
      To edit or delete a comment that you previously made on a response:
    </p>
    <ol>
      <li>
        Navigate to the page where you <a (click)="jumpTo(SessionsSectionQuestions.SESSION_ADD_COMMENTS); questionsToCollapsed[SessionsSectionQuestions.SESSION_ADD_COMMENTS] = true" [tmRouterLink]="">added the comment</a> that you want to edit or delete.
      </li>
      <li>
        Hover over the comment which you want to edit or delete.
      </li>
      <li>
        Click the <button class="btn btn-outline-primary btn-sm"><i class="fas fa-pencil-alt"></i></button> icon to edit the comment, or
        <button class="btn btn-outline-primary btn-sm"><i class="fas fa-trash"></i></button> icon to delete the comment. The icons are visible on the right-hand side of the comment field.
      </li>
      <li>
        If you are editing the comment, make your edits and click <button class="btn btn-success btn-sm"><i class="fas fa-save"></i> Save</button> to save changes.
      </li>
      <li>
        If you are deleting the comment, click <span class="ui-text">Yes</span> to confirm that you want to delete the comment.
      </li>
    </ol>
  </tm-instructor-help-panel>

  <!-- Section -->
  <h4 *ngIf="displaySubsection(19, 23)">Restoring Deleted Sessions</h4>
  <!-- Question -->
  <tm-instructor-help-panel class="instr-help-qn-first" #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.VIEW_DELETED_SESSION)"
                            [id]="SessionsSectionQuestions.VIEW_DELETED_SESSION"
                            [section]="Sections.sessions"
                            headerText="How do I view sessions I have deleted?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.VIEW_DELETED_SESSION]">
    <p>
      You can view all your deleted feedback sessions by navigating to the <span class="ui-text">Sessions</span> page.<br>
      Scroll to the <span class="ui-text">Deleted feedback sessions</span> heading, which looks similar to this:
    </p>
    <tm-example-box *ngIf="questionsToCollapsed[SessionsSectionQuestions.VIEW_DELETED_SESSION]" @collapseAnim>
      <tm-sessions-recycle-bin-table
              [recycleBinFeedbackSessionRowModels]="exampleRecycleBinFeedbackSessions"
              [isRecycleBinExpanded]="false">
      </tm-sessions-recycle-bin-table>
    </tm-example-box>
    <p>
      The feedback sessions you have previously deleted are listed here.
      In order to access information in a deleted session, <a (click)="jumpTo(SessionsSectionQuestions.RESTORE_SESSION); questionsToCollapsed[SessionsSectionQuestions.RESTORE_SESSION] = true" [tmRouterLink]="">restore the session</a>.
    </p>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.RESTORE_SESSION)"
                            [id]="SessionsSectionQuestions.RESTORE_SESSION"
                            [section]="Sections.sessions"
                            headerText="How do I restore a deleted session?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.RESTORE_SESSION]">
    <p>
      To restore a deleted feedback session, first <a (click)="jumpTo(SessionsSectionQuestions.VIEW_DELETED_SESSION); questionsToCollapsed[SessionsSectionQuestions.VIEW_DELETED_SESSION] = true" [tmRouterLink]="">view the session</a> that you would like to restore in the <span class="ui-text">Sessions</span> page.<br>
      Then, click on the <button class="btn btn-light btn-sm">Restore</button> button corresponding to the session you want to restore.
    </p>
    <tm-example-box *ngIf="questionsToCollapsed[SessionsSectionQuestions.RESTORE_SESSION]" @collapseAnim>
      <tm-sessions-recycle-bin-table
              [recycleBinFeedbackSessionRowModels]="exampleRecycleBinFeedbackSessions"
              [isRecycleBinExpanded]="true">
      </tm-sessions-recycle-bin-table>
    </tm-example-box>
    <p>
      After restoring the session, all the information relevant to the session (e.g. questions, responses, comments) will also be restored.
    </p>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.PERMANENT_DEL_SESSION)"
                            [id]="SessionsSectionQuestions.PERMANENT_DEL_SESSION"
                            [section]="Sections.sessions"
                            headerText="How do I permanently delete a session?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.PERMANENT_DEL_SESSION]">
    <p>
      To permanently delete a feedback session, first <a (click)="jumpTo(SessionsSectionQuestions.VIEW_DELETED_SESSION); questionsToCollapsed[SessionsSectionQuestions.VIEW_DELETED_SESSION] = true" [tmRouterLink]="">view the session</a> that you would like to permanently delete in the <span class="ui-text">Sessions</span> page.<br>
      Then, click on the <button class="btn btn-sm btn-light text-danger">Delete Permanently</button> button corresponding to the session you want to delete.
    </p>
    <tm-example-box *ngIf="questionsToCollapsed[SessionsSectionQuestions.PERMANENT_DEL_SESSION]" @collapseAnim>
      <tm-sessions-recycle-bin-table
              [recycleBinFeedbackSessionRowModels]="exampleRecycleBinFeedbackSessions"
              [isRecycleBinExpanded]="true">
      </tm-sessions-recycle-bin-table>
    </tm-example-box>
    <p>
      After deleting the session, all the information relevant to the session (e.g. questions, responses, comments) will also be permanently deleted.
    </p>
  </tm-instructor-help-panel>
  <!-- Question -->
  <tm-instructor-help-panel class="instr-help-qn-last" #question [hidden]="key && !showQuestion.includes(SessionsSectionQuestions.RESTORE_DEL_ALL)"
                            [id]="SessionsSectionQuestions.RESTORE_DEL_ALL"
                            [section]="Sections.sessions"
                            headerText="How do I restore/delete all sessions from Recycle Bin?"
                            [(isPanelExpanded)]="questionsToCollapsed[SessionsSectionQuestions.RESTORE_DEL_ALL]">
    <p>
      First <a (click)="jumpTo(SessionsSectionQuestions.VIEW_DELETED_SESSION); questionsToCollapsed[SessionsSectionQuestions.VIEW_DELETED_SESSION] = true" [tmRouterLink]="">view the session</a> and check for sessions in Recycle Bin.<br>
      To restore all sessions, click on the <button class="btn btn-sm btn-secondary"><i class="fas fa-check"></i> Restore All</button> button in <span class="ui-text">Deleted feedback sessions</span> heading;
      to delete all sessions, click on the <button class="btn btn-sm btn-secondary"><i class="fas fa-times"></i> Delete All</button> button in <span class="ui-text">Deleted feedback sessions</span> heading.
    </p>
    <tm-example-box *ngIf="questionsToCollapsed[SessionsSectionQuestions.RESTORE_DEL_ALL]" @collapseAnim>
      <tm-sessions-recycle-bin-table
              [recycleBinFeedbackSessionRowModels]="exampleRecycleBinFeedbackSessions"
              [isRecycleBinExpanded]="false">
      </tm-sessions-recycle-bin-table>
    </tm-example-box>
  </tm-instructor-help-panel>
</div>
